<template>
  <div class="foodDesc" ref="foodDescWrapper">
    <div>
      <!-- 1.0 菜品图片 -->
      <div class="food-img">
        <img :src="food.icon" alt="" height="auto" width="100%" />
      </div>
      <div class="icon-arrow_lift" @click.stop="closeFoodDesc"></div>
      <!-- 2.0 商品头部  -->
      <div class="header">
        <!-- 2.1 菜品名称 -->
        <div class="food-name">{{ food.name }}</div>
        <!-- 2.2 月销量/好评率 -->
        <div class="food-extra">
          <span class="sellCount">月销{{ food.sellCount }}份</span>
          <span>好评率{{ food.rating }}%</span>
        </div>
        <!-- 2.3 价格/加入购物车 -->
        <div class="header-bottom">
          <!-- 2.3.1 价格 -->
          <div class="food-price">
            <span class="price-icon">￥</span>{{ food.price }}
            <span v-show="food.oldPrice" class="oldPrice"
              >￥{{ food.oldPrice }}</span
            >
          </div>
          <!-- 2.3.2 加入购物车 -->

          <cartcontrol v-if="'count' in food && food.count >= 0" :food="food" class="cartcontrol"/>
          <div class="add-cart" v-else @click="addCart">
            <span>加入购物车</span>
          </div>
        </div>
      </div>
      <whiteSpace />
      <!-- 3.0  商品介绍-->
      <div class="food-desc">
        <div class="title">商品介绍</div>
        <div class="text">{{ food.info }}</div>
      </div>
      <whiteSpace />
      <!-- 4.0  商品评价-->
      <div class="food-ratings">
        <div class="title">商品评价</div>
        <div class="ratings-bottom">
          <ratingsFilter
            :selected.sync="selected"
            :ratings="food.ratings"
            :onlyContent.sync="onlyContent"
            :rankbyScore.sync="rankbyScore"
            :rankbyTime.sync="rankbyTime"
            :ratingsType="ratingsType"
          />
          <!-- 2.2 评论内容 -->
          <div class="ratings-item" v-for="(item, i) in ratingsList" :key="i">
            <!-- 2.2.1 评论时间 -->
            <span class="ratetime">{{ formatDate(item.rateTime) }}</span>
            <!-- 2.2.2 用户名+头像 -->
            <div class="user">
              <span class="username">{{ item.username }}</span>
              <img :src="item.avatar" alt="" width="12" height="12" />
            </div>
            <!-- 2.2.3 用户评论 -->
            <div class="user-ratings">
              <!-- 2.2.3.1 用户点评菜 -->
              <span class="recommend" v-if="item.length != 0">
                <recommend :item="item" :type="item.rateType" />
              </span>
              <!-- 2.2.3.2 评论内容 -->
              <span class="ratings-text">{{ item.text }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import ratingsFilter from "../ratingsFilter/ratingsFilter";
import whiteSpace from "../whiteSpace/whiteSpace";
import { formatDate } from "../../js/tools";
import BScroll from "better-scroll";
import recommend from "../recommend/recommend";
import cartcontrol from "../ShopCart/cartcontrol";
export default {
  name: "foodDesc",
  props: ["food"],
  components: {
    whiteSpace,
    ratingsFilter,
    recommend,
    cartcontrol,
  },
  data: () => ({
    ratings: [],
    selected: 2,
    onlyContent: false,
    rankbyTime: false,
    rankbyScore: false,
    listHeight: [],
    scrollY: 0,
    ratingsType: ["全部", "推荐", "吐槽"],
  }),
  computed: {
    ratingsList() {
      let result = this.ratings;
      // 满意
      if (this.selected === 0) {
        result = result.filter((_) => _.rateType === 0);
      }
      // 不满意
      if (this.selected === 1) {
        result = result.filter((_) => _.rateType === 1);
      }
      // 只读
      if (this.onlyContent) {
        result = result.filter((_) => _.text);
      }
      // 按时间 排序
      if (this.rankbyTime) {
        result.sort(function (_1, _2) {
          return _2.rateTime - _1.rateTime;
        });
      }
      // 按评分 排序
      if (this.rankbyScore) {
        result.sort(function (_1, _2) {
          return _2.score - _1.score;
        });
      }
      return result;
    },
  },
  methods: {
    formatDate,
    // 关闭当前页面-商品详情页
    closeFoodDesc() {
      this.foodDescScroll.destroy();
      this.$emit("showFoodDesc");
    },
    addCart() {
      if (!this.food.count) {
        /* 给一个观测对象
           Vue.set( target, key, value )
           target：要更改的数据源(可以是对象或者数组)
           key：要更改的具体数据
           value ：重新赋的值                       */
        Vue.set(this.food, "count", 0);
      }
      // 将菜品添加到 购物车
      //this.$store.commit('addToCart',this.food);
      this.$store.dispatch("aAddToCart", this.food);
    },
    // 初始化滚动对象
    _initScroll() {
      this.foodDescScroll = new BScroll(this.$refs.foodDescWrapper, {
        click: true,
        mouseWheel: true,
      });
      // 监听滚动的实时位置，位置信息放在pos中
      this.foodDescScroll.on("scroll", (pos) => {
        // 判断滑动方向
        if (pos.y <= 0) {
          this.scrollY = Math.abs(Math.round(pos.y));
          console.log(this.scrollY);
        }
      });
    },
  },
  created() {
    // 获取评论数据
    this.$nextTick(function () {
      // 回调函数
      this.ratings = this.food.ratings;
    });
    // 初始化滚动对象
    setTimeout(() => {
      this._initScroll();
    }, 10);
  },
};
</script>

<style lang="scss" scoped>
.foodDesc {
  z-index: 3;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: $e-white;
  color: $e-dgrey;
  .icon-arrow_lift {
    z-index: 55;
    position: fixed;
    top: 10px;
    left: 5px;
    color: $e-white;
    font-size: $md-size;
  }
  .header {
    padding: 18px;
    .food-name {
      font-size: $md-size;
      line-height: 14px;
      font-weight: 700;
      color: eleblack(1);
    }
    .food-extra {
      color: $e-dgrey;
      margin-top: 8px;
      font-size: $sm-size;
      .sellCount {
        margin-right: 12px;
      }
    }
    .header-bottom {
      position: relative;
      .food-price {
        margin-top: 18px;
        font-size: $md-size;
        font-weight: 700;
        color: $e-red;
        line-height: 24px;
        .price-icon {
          font-size: $sm-size;
          font-weight: normal;
        }
        .oldPrice {
          color: $e-grey;
          text-decoration: line-through;
        }
      }
      .add-cart{
        position: absolute;
        top: 0;
        right: 0;
        width: 74px;
        height: 24px;
        padding: 6px 0;
        color: $e-white;
        font-size: $xs-size;
        font-weight: 200;
        background: $e-dblue;
        border-radius: 12px;
        text-align: center;
        box-sizing: border-box;
      }
      .cartcontrol{
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
  .title {
    font-size: $md-size;
    color: eleblack(1);
  }
  .food-desc {
    padding: 18px;
    .text {
      margin: 6px 8px 0 8px;
      color: $e-dgrey;
      font-size: $sm-size;
      font-weight: 200;
      line-height: 24px;
    }
  }
  .food-ratings {
    .title {
      margin: 18px;
    }
    .ratings-bottom {
      .ratings-item {
        position: relative;
        margin: 18px 18px 0 18px;
        padding-bottom: 18px;
        font-size: $xs-size;
        line-height: 12px;
        color: $e-dgrey;
        border-bottom: 1px solid eleblack(0.1);
        &:last-child {
          border-bottom: none;
        }
        .user {
          position: absolute;
          right: 0px;
          top: 0px;
          img {
            border-radius: 50%;
            margin-left: 6px;
          }
        }
        .user-ratings {
          margin-top: 6px;
          .recommend {
            display: inline-block;
            margin-right: 4px;
          }
          .ratings-text {
            font-size: $sm-size;
            color: eleblack(1);
            line-height: 16px;
          }
        }
      }
    }
  }
}
</style>